<%--
  Created by IntelliJ IDEA.
  User: lanmeng
  Date: 2020/8/20
  Time: 14:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="${pageContext.request.contextPath}/static/js/jquery-2.1.0.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/static/toastr/toastr.min.js" type="text/javascript"
        charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/member/css/list.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/toastr/toastr.min.css">

<html>
<head>
    <title>会员列表</title>
</head>
<body>
<div>
    <div style="padding:20px;">
        <div>
            <form role="form" class="form-inline">
                <div class="form-group">
                    <label>会员编号</label>
                    <input type="text" class="catgid form-control" placeholder="会员编号" id="userId"/>
                </div>
                <div class="form-group">
                    <label>会员姓名</label>
                    <input type="text" class="shopname form-control" placeholder="会员姓名" id="userName"/>
                </div>
                <button type="button" class="btn btn-primary btn-sm" id="srchFor" onclick="seek()">
                    搜索
                </button>

            </form>
        </div>
    </div>
    <div>
        <table class="table table-hover table-bordered" style="text-align: center">
            <thead>
            <tr style="background-color: #BBDCFB">
                <th>编号</th>
                <th>会员编号</th>
                <th>会员姓名</th>
                <th>会员手机号</th>
                <th>会员地址</th>
                <th>会员身份证</th>
                <th>状态</th>
                <th>会员卡id</th>
                <th>会员余额</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb"></tbody>
            <%--            <c:forEach items="${user}" var="user">--%>
            <%--                <tr>--%>
            <%--                    <td>${user.id}</td>--%>
            <%--                    <td>${user.userId}</td>--%>
            <%--                    <td>${user.userName}</td>--%>
            <%--                    <td>${user.phone}</td>--%>
            <%--                    <td>${user.address}</td>--%>
            <%--                    <td>${user.idCard}</td>--%>
            <%--                    <td>--%>
            <%--                        <a class="btn btn-xs btn-info" >启用</a>--%>
            <%--                    </td>--%>
            <%--                    <td>${user.cardId}</td>--%>
            <%--                    <c:forEach items="${card}" var="card">--%>
            <%--                        <c:if test="${user.cardId==card.cardId}"><td>${card.amount}</td></c:if>--%>
            <%--                    </c:forEach>--%>

            <%--                    <td>${user.createdTime}</td>--%>
            <%--                    <td>--%>
            <%--                        <button type="button" class="btn btn-info btn-sm alter" data-toggle="modal" data-target="#myModal">修改</button>--%>
            <%--                        <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm">删除</button>--%>
            <%--                    </td>--%>
            <%--                </tr>--%>

            <%--            </c:forEach>--%>
        </table>
    </div>
    <div class="form-inline">
        <span id="navBar">显示第<span id="start"></span>到<span id="end"></span>条，总共<span id="count"></span>页记录，每页显示
                <div class="btn-group dropup">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span id="pageCount"></span>&nbsp;&nbsp;<span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="javascript:page(1,5)">5</a></li>
                <li><a href="javascript:page(1,10)">10</a></li>
                <li><a href="javascript:page(1,50)">50</a></li>
                <li><a href="javascript:page(1,100)">100</a></li>
            </ul>
        </div>
				条记录</span>
        <div class="btn-group pull-right">
            <nav  aria-label="Page navigation" >
                <ul class="pagination" id="page" style="margin: 0px 0">
                </ul>
            </nav>
        </div>

    </div>


</div>
<!--修改模态框-->
<form id="for1">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改会员信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <div class="row ">
                            <div class="col-md-6 " hidden>
                                <div class="form-group input-group ">
                                    <span class="input-group-addon ">会员编号</span>
                                    <input class="form-control " placeholder="会员编号" name="userId" id="userId1">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group input-group " id="d1">
                                    <span class="input-group-addon">会员姓名</span>
                                    <input class="form-control" placeholder="会员姓名" name="userName" id="userName1">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group input-group" id="d2">
                                    <span class="input-group-addon">会员手机号</span>
                                    <input class="form-control" placeholder="会员手机号" name="phone" id="phone"
                                           onkeyup="this.value=this.value.replace(/\D/g,'')">
                                </div>
                            </div>

                        </div>
                        <div class="row">

                            <div class="col-md-9">
                                <div class="form-group input-group" id="d3">
                                    <span class="input-group-addon">会员身份证号</span>
                                    <input class="form-control" placeholder="会员身份证号" name="idCard" id="idCard">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group input-group" >
                                    <select class="form-control" id="status">
                                        <option value="1">启用</option>
                                        <option value="2">禁用</option>

                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group input-group">
                                    <span class="input-group-addon">会员卡id</span>
                                    <input class="form-control" placeholder="会员卡id" readonly="readonly" name="cardId"
                                           id="cardId" disabled>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group input-group">
                                    <span class="input-group-addon">会员卡余额</span>
                                    <input class="form-control" placeholder="会员卡余额" readonly="readonly" name="amout"
                                           id="amout" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group input-group">
                                    <span class="input-group-addon">地址</span>
                                    <input class="form-control" placeholder="地址" name="address"
                                           id="address">
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" onclick="btn_ok()">确认
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>
<!--修改模态框-->

<!-- 删除提示 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title">操作提示</h5>
            </div>
            <form action="/userServlet/deleteID">
                <div class="modal-body">
                    确认当前操作
                    <input hidden name="id" id="id">
                </div>
                <div id="opinfo" class=" modal-footer">
                    <button type="submit" class="confirm btn btn-primary btn-success btn-sm">确认</button>
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 删除提示 -->

<script src="${pageContext.request.contextPath}/member/js/list.js"></script>
<script>


    /**
     * 会员信息修改
     */
    function btn_ok() {
        let userName = $("#userName1");//会员姓名
        let phone = $("#phone");//手机号
        let idCard = $("#idCard");//身份证号
        let address = $("#address");//地址
        let d2 = document.getElementById("d2");
        let d3 = document.getElementById("d3");
        if (d2.className == "form-group input-group has-error" || d3.className == "form-group input-group has-error") {
            toastr.error("未输入正确信息");
        } else if (userName.val() != "" && phone.val() != "" && idCard.val() != "" && address.val() != "") {
            toastr.success("操作成功");
            $("#myModal").modal("hide");
            let user=new Object();
            user.userId=$("#userId1").val();
            user.userName=userName.val();
            user.phone=phone.val();
            user.idCard=idCard.val();
            user.address = address.val();
            user.status=$("#status").val();
            $.ajax({
                type:"post",
                url:"/userServlet/alterID",
                data:user,
                success:function (data) {
                    let td = $("td:contains(" + data[0].userId + ")").parent().children("td");
                    td[2].innerText=data[0].userName;
                    td[3].innerText=data[0].phone;
                    td[4].innerText=data[0].address;
                    td[5].innerText=data[0].idCard;
                    if (data[0].status==1){
                        td[6].innerHTML='<a class="btn btn-xs btn-info" >启用</a>';
                    }else {
                        td[6].innerHTML='<a class="btn btn-xs btn-danger" >禁用</a>';
                    }
                },
                dataType:"json"
            });
        } else {
            toastr.warning("未输入修改信息");
        }
    }

    $(function () {
        $("#myModal").on('hide.bs.modal', function () {
            document.getElementById("for1").onreset;
        })
        $("#myModal").on('show.bs.modal', function () {
            document.getElementById("for1").onreset;
        })
    })

</script>
</body>
</html>
